<template>
    <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
        <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
            <svg class="bi me-2" width="40" height="32">
                <use xlink:href="#bootstrap"></use>
            </svg>
            <span class="fs-4">企业服务官网模板</span>
        </a>

        <ul class="nav nav-pills">
            <li class="nav-item" v-for="(it, i) in links" :key="i">
                <a href="#" class="nav-link" :class="{ 'active': current === it.href }" aria-current="page">{{ it.label }}</a>
            </li>
        </ul>
    </header>
</template>

<script setup>
import { ref } from 'vue';

const links = /** 导航菜单列表 */ ref([
    { href: '/', label: '首页' },
    { href: '/product', label: '产品服务' },
    { href: '/example', label: '客户案例' },
    { href: '/member', label: '会员中心' },
    { href: '/about', label: '关于我们' },
])

const current = /** 当前页面 */ ref('/')
/** 页面初始化 */
function init () {
    const route = location.href.replace(location.origin, '').split('?')[0]
    if (links.value.map(e => e.href).includes(route)) {
        current.value = route
    }
}

init ()
</script>

<style lang="scss" scoped>
.nav-pills .nav-link {
    color: black;
}

.nav-pills .nav-link.active {
    color: var(--bs-nav-pills-link-active-bg);
    background-color: transparent;
}
</style>
